<script setup lang="ts">
import { ref, defineEmits, computed, watch, onMounted } from 'vue';
// import { Message } from '@arco-design/web-vue';
import { useBooleanStore } from '@/store';
import {
  queryPackageByConsole,
  querySortConsole,
} from '@/api/sorting-matching';

const emit = defineEmits(['updateArray', 'updateArrayConsole', 'consoleNameInput']);
const props = defineProps<{
  consoleId: any;
  consoleNameTable: any;
}>();
const booleanStore = useBooleanStore();
const hStyle = ref({
  'background-color': booleanStore.color,
  'border-radius': booleanStore.borderRadius,
});
const pageSize = ref(30);
const pageNumber = ref(1);
const pageNumTwo = ref(1);
const pageSizeTwo = ref(30);

const batchNo = ref('');
const startPlaneNo = ref('');
const aoCode = ref('');
const packageCode = ref('');
const itemCode = ref('');
const state = ref('');
const dailyStartTime = ref('');
const dailyEndTime = ref('');
const weekStartTime = ref('');
const weekEndTime = ref('');
const monthStartTime = ref('');
const monthEndTime = ref('');
const deliveryState = ref('');

// 发送搜索数据
const flowQueryData = ref({
  searchParams: computed(() => ({
    batchNo: batchNo.value,
    startPlaneNo: startPlaneNo.value,
    aoCode: aoCode.value,
    packageCode: packageCode.value,
    itemCode: itemCode.value,
    state: state.value,
    dailyStartTime: dailyStartTime.value,
    dailyEndTime: dailyEndTime.value,
    weekStartTime: weekStartTime.value,
    weekEndTime: weekEndTime.value,
    monthStartTime: monthStartTime.value,
    monthEndTime: monthEndTime.value,
    deliveryState: deliveryState.value,
    consoleIp: '',
    consoleId: '',
  })),
  pageParameter: computed(() => ({
    pageSize: pageSize.value,
    currentPage: pageNumber.value,
  })),
});

// 表格数据
async function handleSearch() {
  const newData = await querySortConsole();
  emit('updateArray', newData);
  
}

async function handleSearchConsole() {
  const newData = await queryPackageByConsole(flowQueryData.value);
  emit('updateArrayConsole', newData);
}

async function SearchConsole() {
  flowQueryData.value.searchParams.consoleId = '';
  emit('consoleNameInput', '');
  await handleSearchConsole();
}

// 重置
function reset() {
  batchNo.value = '';
  startPlaneNo.value = '';
  aoCode.value = '';
  packageCode.value = '';
  itemCode.value = '';
  state.value = '';
  dailyStartTime.value = '';
  dailyEndTime.value = '';
  weekStartTime.value = '';
  weekEndTime.value = '';
  monthStartTime.value = '';
  monthEndTime.value = '';
  deliveryState.value = '';
  SearchConsole();
}

onMounted(() => {
  handleSearch();
});
// 监听分页
watch(
  () => props.consoleId,
  () => {
    flowQueryData.value.searchParams.consoleId = props.consoleId;
    handleSearchConsole();
  },
  { immediate: true }
);
watch(
  () => props.consoleNameTable,
  () => {
    emit('consoleNameInput', props.consoleNameTable);
  },
  { immediate: true }
);
watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
  if (booleanStore.num5 === 22) {
    pageNumber.value = booleanStore.pageNum;
    pageSize.value = booleanStore.pageSize;
    handleSearch();
  }
});
watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
  if (booleanStore.num5 === 23) {
    pageNumTwo.value = booleanStore.pageNum;
    pageSizeTwo.value = booleanStore.pageSize;
    handleSearch();
  }
});
</script>

<template>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">查询条件</div>
    </template>

    <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <a-input
          v-model="batchNo"
          placeholder="批次"
          size="large"
          allow-clear
        />
      </a-col>
      <a-col :span="6">
        <a-input
          v-model="startPlaneNo"
          placeholder="架次"
          size="large"
          allow-clear
        />
      </a-col>
      <!-- <a-col :span="6">
        <a-input
          v-model="aoCode"
          placeholder="AO编码"
          size="large"
          allow-clear
        />
      </a-col> -->
      <a-col :span="6">
        <a-input
          v-model="packageCode"
          placeholder="工作包编码"
          size="large"
          allow-clear
        />
      </a-col>
      <a-col :span="6">
        <a-select
          v-model="state"
          placeholder="配套状态"
          default-value=""
          allow-clear
        >
          <a-option label="初始状态" value="00"></a-option>
          <a-option label="配套完成" value="02"></a-option>
          <a-option label="缺件状态" value="04"></a-option>
          <a-option label="取消状态" value="06"></a-option>
        </a-select>
      </a-col>
    </a-row>

    <a-row class="margin-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
      <!-- <a-col :span="6">
        <a-input
          v-model="itemCode"
          placeholder="图号"
          size="large"
          allow-clear
        />
      </a-col> -->
      

      <a-col :span="6">
        <a-date-picker
          v-model="dailyStartTime"
          style="width: 100%"
          placeholder="日计划开始日期"
          size="large"
          allow-clear
        />
      </a-col>
      <a-col :span="6">
        <a-date-picker
          v-model="dailyEndTime"
          style="width: 100%"
          placeholder="日计划结束时间"
          size="large"
          allow-clear
        />
      </a-col>
      <a-col :span="6">
        <a-date-picker
          v-model="weekStartTime"
          style="width: 100%"
          placeholder="周计划开始时间"
          size="large"
          allow-clear
        />
      </a-col>
      <a-col :span="6">
        <a-date-picker
          v-model="weekEndTime"
          style="width: 100%"
          placeholder="周计划结束时间"
          size="large"
          allow-clear
        />
      </a-col>
    </a-row>

    <a-row class="margin-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
      
      <!-- <a-col :span="6">
        <a-date-picker
          v-model="monthStartTime"
          style="width: 100%"
          placeholder="月计划开始日期"
          size="large"
          allow-clear
        />
      </a-col>
      <a-col :span="6">
        <a-date-picker
          v-model="monthEndTime"
          style="width: 100%"
          placeholder="月计划结束时间"
          size="large"
          allow-clear
        />
      </a-col> -->
    </a-row>

    <a-row class="margin-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
      <!-- <a-col :span="6">
        <a-select
          v-model="deliveryState"
          placeholder="交接状态"
          size="large"
          allow-clear
        >
          <a-option value="0">待分拣</a-option>
          <a-option value="1">已分拣</a-option>
        </a-select>
      </a-col> -->
      <a-col :span="18">
        <a-button type="primary" size="large" @click="SearchConsole">
          查询
        </a-button>
        <a-button class="btn-reset" size="large" @click="reset">重置 </a-button>
      </a-col>
    </a-row>
  </a-card>
</template>

<style scoped>
.margin-top {
  margin-top: 10px;
}
.btn-group {
  float: right;
  margin-top: 15px;
}

.btn-reset {
  margin-left: 10px;
}
.font {
  font-size: 20px;
  color: black;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.div-tips {
  align-items: center;
  text-align: center;
  color: #999;
}
.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
}
</style>
